<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>product detail</title>
    <script src="/js/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 1090px;
            margin: auto;
            background: #ffe;
        }

        #left,
        #right {
            float: left;
            height: 530px;
        }

        #left {
            width: 430px;
            margin-right: 40px;
        }

        #right {
            width: 620px;
        }

        .picture {
            width: 430px;
            height: 430px;
        }

        .pictures {
            width: 76px;
            height: 76px;
            display: inline-block;
            float: left;
            border: 1px solid #ddd;
            margin-right: 10px;
        }

        #pictures-wrapper {
            margin: 18px -10px 0 0;
        }

        h2 {
            font-size: 20px;
            color: #333;
        }

        p {
            color: #999;
            margin: 10px 0 20px;
        }

        #info {
            background: #f5f3ef;
            border-top: 1px dotted #dedede;
            border-bottom: 1px dotted #dedede;
            padding: 20px 10px;
        }

        #price {
            color: red;
            font-size: 1.8em;
            margin-left: 35px;
            font-weight: bolder;
        }

        #price::before {
            content: '￥';
            font-size: .5em;
            color: red;
            font-weight: bolder;
        }

        #item-description,
        #description {
            display: inline-block;
            float: left;
        }

        #description {
            margin-left: 40px;
            width: 500px;
        }

        #description-wrapper {
            margin-top: 20px;
        }

        .clear {
            clear: both;
        }

        textarea {
            width: 100%;
            min-width: 100%;
            max-width: 100%;
            height: 150px;
            margin: 50px 0 20px;
        }

        /*    comment   */
        .member,
        .comment {
            float: left;
        }

        .member {
            width: 80px;
            padding: 0 20px;
            text-align: center;
        }

        .title {
            font-size: .8em;
        }

        .content {
            color: #333;
        }

        .comment img {
            width: 200px;
            border: 1px solid #ddd;
        }

        .time {
            font-size: .8em;
        }

        .member img {
            width: 80px;
        }

        .comment {
            width: 830px;
        }


    </style>
</head>
<body>
<!-- 从外到内，从大到小 -->
<div id="container">
    <div id="left">
        <img class="picture" th:src="@{'http://127.0.0.1:8081/product/' +  ${product.picture}}" alt="">
        <div id="pictures-wrapper">
            <img class="pictures" th:each="picture: ${#strings.arraySplit(product.pictures, ',')}"
                 th:src="@{'http://127.0.0.1:8081/product/' +  ${picture}}" alt="">

            <!--            <img class="pictures" src="/static/pictures/product/54b175f0-2670-415f-9c55-c815c40b1c7d.webp" alt="">-->
            <!--            <img class="pictures" src="/static/pictures/product/54b175f0-2670-415f-9c55-c815c40b1c7d.webp" alt="">-->
            <!--            <img class="pictures" src="/static/pictures/product/54b175f0-2670-415f-9c55-c815c40b1c7d.webp" alt="">-->
            <!--            <img class="pictures" src="/static/pictures/product/54b175f0-2670-415f-9c55-c815c40b1c7d.webp" alt="">-->
            <!--            <img class="pictures" src="/static/pictures/product/54b175f0-2670-415f-9c55-c815c40b1c7d.webp" alt="">-->
        </div>

    </div>
    <div id="right">
        <h2 th:text="${product.title}">纽仕兰 新西兰4.0g全脂纯牛奶 250ml*24盒</h2>
        <p th:text="${product.subtitle}">天然草饲牧场，4.0g优质乳蛋白营养牛奶</p>
        <div id="info">
            <span>价格</span>
            <span id="price" th:text="${product.price}">123.45</span>
            <div id="description-wrapper">
                <span id="item-description">描述</span>
                <span id="description" th:text="${product.description}">
                1、贮藏方法：常温保存，开启后需冷藏并于3日内饮用完毕。可能会有少量蛋白质沉淀和乳脂肪上浮，属正常现象，饮用前请摇匀。
                2、注意事项：若包装破损，请勿食用。
                3、网易严选出售的食品，除明确质量问题外均不接受退换货。
                 </span>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div id="comment-wrapper">
        <form id="comment_form">
            <textarea name="content" required placeholder="评论内容"></textarea>
            <br>
            <input type="file" name="files" multiple><br>
            <br>
            <input type="submit" value="发布评论">
        </form>
    </div>
    <br>
    <hr>
    <br>
    <div id="comments_wrapper">
        <div class="member">
            <img src="/static/img/7e96dc703754e3512c918a692d88bae5.webp" alt="">
            <p>斯****怪</p>
        </div>
        <div class="comment">
            <p class="title">规格:250毫升*24支（整箱装）</p>
            <p class="content">
                超级好，网易的这个牛奶真的比较好喝，特别喜欢以后每个月都要买一次，这个性价比真的是无敌的存在，特别喜欢，网易严选，真品质</p>
            <img src="/static/img/7e96dc703754e3512c918a692d88bae5.webp" alt="">
            <img src="/static/img/7e96dc703754e3512c918a692d88bae5.webp" alt="">
            <img src="/static/img/7e96dc703754e3512c918a692d88bae5.webp" alt="">
            <img src="/static/img/7e96dc703754e3512c918a692d88bae5.webp" alt="">
            <img src="/static/img/7e96dc703754e3512c918a692d88bae5.webp" alt="">

            <p class="time">2022-04-20 14:43</p>
        </div>
        <div class="clear"></div>
    </div>
</div>
<script>
    const commentForm = document.getElementById('comment_form');
    const headers = {'Content-Type': 'multipart/form-data'};
    const type = {type: 'application/json'};

    commentForm.addEventListener('submit', event => {
        event.preventDefault();

        let formData = new FormData(commentForm);
        let data = Object.fromEntries(formData);
        formData.append('comment', new Blob([JSON.stringify(data)], type));

        axios.post('/comment/create', formData, {headers: headers}).then(res => {
            console.log(res.data);
            if (res.data) {
                alert('success');
            } else {
                alert('sign in first.');
            }
        }).catch(err => {
            console.error(err);
        });
    })
    axios.get('/comment/query_comment_member_product').then(res => {
        console.log(res.data);
        //     todo
    }).catch(err => {
        console.error(err);
    });

</script>
</body>
</html>